<template>
  <div>
    <!-- 页头 -->
    <el-row :gutter="10">
        <el-col :span="2" style="position:absolute; padding-top:20px;padding-left:30px;">
          <el-button type="primary" plain icon="el-icon-arrow-left">返回</el-button>
        </el-col>
        <el-col :span="20" style="position:relative;left:150px;top:10px;">
        <div>
          <h3>财务部员工信息</h3>
          <p>员工数量：(5)</p>
        </div>
        </el-col>
    </el-row>
    <!-- 查询 -->
    <el-row>
      <el-col :span="10" :offset="1" style="margin-top:40px;margin-bottom:20px;">
        <el-form :inline="true" :model="query" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="query.name" placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="query.position" placeholder="职务">
              <el-option v-for="(item,index) in positions" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item>
            <el-button type="primary" @click="handleQuery">查询</el-button>
          </el-form-item> -->
        </el-form>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-row>
      <el-col :offset="1" :span="21">
        <el-table :data="departMembers" border fit>
          <el-table-column prop="Id" align="center" label="员工ID"></el-table-column>
          <el-table-column prop="name" align="center" label="姓名"></el-table-column>
          <el-table-column prop="gender" align="center" label="性别"></el-table-column>
          <el-table-column prop="phone" align="center" label="联系电话"></el-table-column>
          <el-table-column prop="state" align="center" label="状态"></el-table-column>
          <el-table-column prop="position" align="center" label="职务"></el-table-column>
          <el-table-column prop="address" align="center" label="地址"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="show(scope.row.Id)" >查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <el-row style="padding-top:20px;">
      <el-col :offset="1">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5,10,20,40]"
          :current-page="query.currentPage"
          :page-size="query.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getPositions,getMembers} from '@/api/manager'
export default {
  data() {
    return {
      query: {
        name: "",
        position: "",
        currentPage:1,
        limit:4
      },
      positions:[],
      departMembers: [],
      total:0
    };
  },
  mounted(){
      this.getPositions()
      this.getMembers()
  },
  methods:{
      async getPositions(){
          const res = await getPositions('1111')
          if(res.code==200){
              this.positions=res.data.positions
          }
      },
      async getMembers(){
          const res=await getMembers("1111",this.query.limit,this.query.currentPage)
          if(res.code=200){
              this.departMembers=res.data.departMembers
              this.total=res.data.total
          }
      },
      handleSizeChange(limit) {
        this.query.limit=limit
        this.getMembers()
      },
      handleCurrentChange(currentPage) {
        this.query.currentPage=currentPage
        this.getMembers()
      },
      //查看
      show(Id){
        this.$router.push({
           name: 'SimpleInfo',
           params: {
             employeeId: Id
           }
        })
          console.log("员工ID：",Id)
      }
  }
};
</script>
